<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="assets/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	//页面加载完毕,获取商品数据
	$(function(){
		//查询商品,并展示到页面
		findSale();
	});
	
	function findSale(param){
		/* GET		/InSystem/sale/findAllByPage
		``
		参数
			pageNum=1
			pageSize=5
			flag=0 */
		//获取当前页数据
		var pageNum = 1;
		//根据span中的值进行修改
		var cp = parseInt($("#cp").html());
		var tp = parseInt($("#tp").html());
		if(cp != ""){
			switch(param){
			case "sy":
				//首页
				pageNum = 1;
				break;
			case "syy":
				//上一页
				pageNum = (cp - 1) <= 0 ? 1 : (cp - 1) ;
				break;
			case "xyy":
				//下一页
				pageNum = (cp + 1) > tp ? tp : (cp + 1);
				break;
			case "wy":
				//尾页
				pageNum = tp;
				break;
			}
		}
		var pageSize = 5;
		var flag = $("#orderBy").val();
		//封装参数
		var data = "pageNum="+pageNum+"&pageSize="+pageSize+"&flag="+flag;
		//发送异步请求查询数据
		$.ajax({
			url : "http://localhost/sale/list",
			data : data,
			type : "GET",
            dataType : "json",
			xhrFields:{withCredentials:true},
			success : function(msg){
				if(msg.code == 0){
					//1.获得json数组
					var json = msg.data;
					//获得分页信息,插入到span中
					var cp = json.pageNum;		//当前页
					var tc = json.total;		//总条数
					var tp = json.pages;		//总页数
					$("#cp").html(cp);
					$("#tc").html(tc);
					$("#tp").html(tp);
					//2.循环遍历json数组封装数.
					var list = json.list;
					var content = "";
					for(var i = 0;i < list.length;i++){
						//将字符串转换为Date类型
						var date = new Date(list[i].saledate * 1000);
						console.log(list[i].saledate);
						content += "<tr>"
							+ "<td>"+list[i].id+"</td>"
							+ "<td>"+list[i].product.productName+"</td>"
							+ "<td>"+list[i].price+"</td>"
							+ "<td>"+list[i].product.quantity+"</td>"
							+ "<td>"+list[i].totalPrice+"</td>"
							+ "<td>"+list[i].saleDate+"</td>"
							+ "<td>"+list[i].user.realname+"</td>"
							+ "</tr>";
					}
					//3.1插入数据之前.先判断tr有几个,tr大于3个.
					//3.1.1选中table标签内的全部的tr标签对象
					var trs = $("#tb tr");
					if(trs.length > 3){
						//之前添加过节点.
						for(var i = 2;i < trs.length-1;i++){
							trs[i].remove();
						}
					}
					//3.2将数据插入.
					$("#saleHeader").after(content);
				}else{
					alert(msg.msg);	
				}
			},
			error : function(msg){
				alert("服务器正在更新,请稍后再试....");
			}
		});
	}
	
	
	//封装函数,将date格式化
	function date2Format(d){
		var yyyy = d.getFullYear();
		var MM = (d.getMonth() + 1) < 10 ? "0"+(d.getMonth() + 1) : (d.getMonth() + 1);
		var dd = d.getDate() < 10 ? "0" + d.getDate() : d.getDate() ;
		var HH = d.getHours() < 10 ? "0" + d.getHours() : d.getHours() ;;
		var mm = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes() ;;
		var ss = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds() ;;
		return yyyy + "-" + MM + "-" + dd + " " + HH + ":" + mm + ":" + ss;
 	}
	                       
	
	
</script>
</head>
<body>
	<div align="center" style="line-height: 20px;">
		<table id="tb" border="1px solid green" style="text-align: center;" width="100%" height="100%">
			<tr style="border: none;">
				<td colspan="4">
					<h3>查看销售记录:</h3>
				</td>
				<td colspan="3">
					排序方式:
					<select id="orderBy">
						<option value="0">销售日期</option>
						<option value="1">单笔总价</option>
					</select>
					<input type="button" onclick="findSale()" value="查询" />
				</td>
			</tr>
			<tr id="saleHeader" style="border: none;">
				<th>ID</th>
				<th>商品</th>
				<th>单价</th>
				<th>数量</th>
				<th>单笔总价</th>
				<th>销售日期</th>
				<th>销售员</th>
			</tr>
			
			<!-- 销售记录数据 -->
			
			<tr style="border: none;">
				<td colspan="7">
					<a href="javascript:findSale('sy');">首页</a>|
					<a href="javascript:findSale('syy');">上一页</a>|
					<a href="javascript:findSale('xyy');">下一页</a>|
					<a href="javascript:findSale('wy');">尾页</a>&nbsp;&nbsp;
					第<span id="cp"></span>页/共<span id="tp"></span>页(<span id="tc"></span>条记录)
				</td>
			</tr>
		</table>
	</div>
</body>
</html>